$(window).resize(function() {

});
$(document).ready(function() {
    initMenuToggle();
    initDragButtonToggle();
    initContainerFunc();
    initDragCptFunc();
    initSelectCptFunc();
});
var WholeFlag = {};
var containerEls= ['container'];
var layoutEls= ['container','row','tabs','scroll','div','model','row-col',"tab-contenti","scroll-contenti"];
var inputEls= ['input','select','button'];
var otherEls= ['stackedBar'];
var regxBlank =new RegExp("\\s+","g");

function initContainerFunc(){
    //测试数据。实际存在数据库中，通过接口获取
    var configs = [{"cptId":"container","cptType":"container","cptTitle":"主容器 ","cptClass":"cpt-c cpt-container","options":{"id":"","classes":"container-fluid","extraClasses":""},"cptChildren":[{"cptId":"445f95c6-54da-4930-917d-1de460267a92","cptType":"tabs","cptTitle":"标签页","cptClass":"cpt-c cpt-tabs","options":{"headerId":"tab-fDCCC922","headerClasses":"nav tab-header","headerExtraClasses":"nav-tabs","contentId":"tabContent-fDCCC922","contentClasses":"tab-content","contentExtraClasses":""},"cptChildrenHeaders":[{"cptId":"0ab7d020-1c26-40ff-8f77-4ed1925ed1f0","cptType":"tab-headeri","options":{"id":"tab-fDCCC922-1","title":"标签1","classes":"nav-link","extraClasses":"active"}},{"cptId":"7a0fa030-42bb-4d81-89a9-f5524348d719","cptType":"tab-headeri","options":{"id":"tab-fDCCC922-2","title":"标签2","classes":"nav-link","extraClasses":""}},{"cptId":"3295edbf-9150-427c-8e1f-32442f219f2f","cptType":"tab-headeri","options":{"id":"tab-fDCCC922-3","title":"标签3","classes":"nav-link","extraClasses":""}}],"cptChildrenContents":[{"cptId":"90a21f22-1b5b-4943-a659-1ca5885ef080","cptType":"tab-contenti","options":{"id":"tabContent-fDCCC922-1","classes":"tab-pane fade","extraClasses":"active show"},"cptChildren":[{"cptId":"bd9488f4-88c1-4684-874e-a7959a86fdd9","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"3d7aab18-0e3f-4964-a602-ed7a3069434f","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"514c9d03-5e42-48ef-8897-380f4efbc1f1","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDDGE716","fieldName":"fDDGE716","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"13b22478-29a4-4ae1-aa14-e1ac9936bc18","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"f27b2f89-839b-45dd-b4fb-e7958a414e03","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAEEA499","fieldName":"fAEEA499","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]}]},{"cptId":"0b4fc046-1689-4179-ae0a-e0bf010f2e05","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"66d8f66b-056f-42b0-acfd-d0cdb57f21aa","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"5a00496b-d206-4a66-bf9b-2c14d37e5128","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fEGGD231","fieldName":"fEGGD231","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"e6b6b8e2-1056-4761-9e46-95ccd20bbe0f","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"3067f220-cbad-46ba-b0ef-c394264477e2","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDAEF767","fieldName":"fDAEF767","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]}]},{"cptId":"a8379c59-02cc-45a7-bc60-d0100f813658","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"17ced8dc-edf2-46e0-9efb-c0f21399da19","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"3844d37f-63f4-4897-93a3-9ed62c91d4ae","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fGABE966","fieldName":"fGABE966","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"f252085e-5b69-4b29-be0b-5192b4538be7","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"}}]},{"cptId":"83a40ccb-94bc-4748-82df-3da7277e5202","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"f0cffa5d-417b-4616-b303-1531931892eb","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"e51be926-09c5-4929-a176-4ea13bb0bef2","cptType":"stackedBar","cptTitle":"堆叠柱状图","cptClass":"cpt-c cpt-stackedBar","options":{"id":"fBDDE493","classes":"chartes","extraClasses":"","chartOpts":{"angleAxis":{"type":"category","data":["分组1","分组2","分组3","分组4"]},"radiusAxis":{"axisLine":{"lineStyle":{"color":"#FFF","width":2}}},"polar":{},"series":[{"type":"bar","data":[2,4,6,8],"coordinateSystem":"polar","name":"A","stack":"a","title":{"textStyle":{"color":"#FFF"}}},{"type":"bar","data":[8,4,8,2],"coordinateSystem":"polar","name":"B","stack":"a","title":{"textStyle":{"color":"#FFF"}}}],"legend":{"show":true,"data":[{"name":"A","icon":"circle","textStyle":{"color":"#FFF"}},{"name":"B","icon":"circle","textStyle":{"color":"#FFF"}}]}},"styles":"width: 300px;height:180px;margin: auto;"}}]},{"cptId":"bf42b836-7299-4dda-9f56-a14993896f1a","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"}}]}]},{"cptId":"ea705a69-cd8d-419f-b887-3aa33f72e1ce","cptType":"tab-contenti","options":{"id":"tabContent-fDCCC922-2","classes":"tab-pane fade","extraClasses":""},"cptChildren":[{"cptId":"00c69fe7-0d23-4fff-98d8-c24a1282e2ab","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"c3e42182-a909-4f2f-af01-2f7e11d916c7","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"4cb81149-0f9e-42fa-9f38-5d236e6a1605","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fEEBF216","fieldName":"fEEBF216","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"16a03ffd-a480-4915-a428-6419177ccced","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"39adc5e5-4385-4bbe-a464-a16d40960cd7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fCFDA611","fieldName":"fCFDA611","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"4c11dc6b-a893-4ca5-bce6-5126263aae12","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"e1a3982f-5880-46b2-bfe1-b132fd99555b","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDCDA319","fieldName":"fDCDA319","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"f95f6cfa-6f04-4226-9dc0-760fab3c12e6","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"a7fe43cb-7618-4dc7-8535-7f2584e3df0f","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fBADG391","fieldName":"fBADG391","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"8e6fbc6f-cfe8-47c2-bc04-25dc0b480f60","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"7ed6415b-0212-4caa-8499-6b2ed5badda0","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fBCFE355","fieldName":"fBCFE355","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"e4f63329-b538-4f68-9232-24c8cd3df77e","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"42ea71d6-2acc-4b39-a217-ca5772dd110c","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fFCCF514","fieldName":"fFCCF514","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"0ca4a055-bbcf-4ada-9a17-1eb0f8d52770","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"},"cptChildren":[{"cptId":"bade1668-75a0-42db-8a7e-907afad06fc4","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fADEG246","fieldName":"fADEG246","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"d0ecc69f-8d16-48b8-b169-2ddfb0e766fd","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-6"}}]}]},{"cptId":"47d873a3-cb7b-4db7-9675-2b1f561907cb","cptType":"tab-contenti","options":{"id":"tabContent-fDCCC922-3","classes":"tab-pane fade","extraClasses":""},"cptChildren":[{"cptId":"9540d47a-e8e7-499f-9b8d-a98f2bafc005","cptType":"table","cptTitle":"重复表","cptClass":"cpt-c cpt-table","options":{"id":"fEBDA352","classes":"box-table","extraClasses":"","tbid":"tb-fEBDA352","tableOpts":{"toolbar":"#tb-fEBDA352","height":400,"columns":[{"id":"fCBED266","field":"fCBED266","title":"标题"},{"id":"fFBCD191","field":"fFBCD191","title":"标题"},{"id":"fBBAD197","field":"fBBAD197","title":"标题"},{"id":"fAFCA962","field":"fAFCA962","title":"标题"},{"id":"fDBCA765","field":"fDBCA765","title":"标题"},{"id":"fADBG545","field":"fADBG545","title":"标题"},{"id":"fDFAF946","field":"fDFAF946","title":"标题"},{"id":"fAAAE199","field":"fAAAE199","title":"标题"}],"data":{"total":100,"rows":[]}}}}]}]},{"cptId":"8ebd6a89-7f28-47d9-8d8c-4960951ef0f3","cptType":"model","cptTitle":"弹出框","cptClass":"cpt-c cpt-model","options":{"id":"addRowForHtmlfEBDA352","classes":"box-div","extraClasses":""},"cptChildren":[{"cptId":"119b1652-1635-4dd2-86ec-b3b56f626b1d","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"8d6975ab-524f-4a64-bb01-ce75571bc32e","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"fdd19f11-f273-4fc7-84f0-9e51e5f6b964","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fCBED266","fieldName":"fCBED266","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"dd01dc8c-4eec-4cfe-bb53-dbd74af93126","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"1187a448-bcb4-42cb-93d4-c6866d7e6bd3","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fFBCD191","fieldName":"fFBCD191","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"61a074f5-e1a2-4a92-995a-b24c0803227b","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"8d801aa0-a9ca-46f0-bf9d-e20006c1b53a","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fBBAD197","fieldName":"fBBAD197","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"0916150a-86c4-4034-88c4-06bd02fa0ef7","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"e4917c0b-4da1-4c03-a35c-e9d58cba2347","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAFCA962","fieldName":"fAFCA962","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"87d54189-6ec3-4685-ac4e-6439feb9ebd6","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"d4da1c14-b5ec-4dbe-ab87-3666961bc3b6","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDBCA765","fieldName":"fDBCA765","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"b52dc69f-e6ea-433f-9c6c-ebfddab929b4","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a6cc51ea-e613-4da1-b0b0-9bb8d27d93b2","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fADBG545","fieldName":"fADBG545","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"66cb8df6-dfdc-41fe-9253-dd2636f982db","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a97fc678-60f5-4462-81e1-c89e7462f1e7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDFAF946","fieldName":"fDFAF946","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"40cd680f-69d1-4410-87fd-e5b2752948cd","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"7159db0d-9950-4376-b645-fd081cd24fd7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAAAE199","fieldName":"fAAAE199","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"f09a0f93-113b-4ad5-95e8-f0793d9bbcd4","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"}}]}]},{"cptId":"487e3eed-bafb-40f0-8846-a8f81a8738af","cptType":"model","cptTitle":"弹出框","cptClass":"cpt-c cpt-model","options":{"id":"editRowForHtmlfEBDA352","classes":"box-div","extraClasses":""},"cptChildren":[{"cptId":"5de11a2e-259e-40c2-a9d6-92ad07e0b234","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"12a99918-2d0f-42fc-be58-4c7e978421f3","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"fdd19f11-f273-4fc7-84f0-9e51e5f6b964","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fCBED266","fieldName":"fCBED266","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"f42cad39-bf87-4bb3-a8fa-04218df014ab","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"1187a448-bcb4-42cb-93d4-c6866d7e6bd3","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fFBCD191","fieldName":"fFBCD191","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"23dd8e17-0638-4f22-ad9f-fc152d57f2aa","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"8d801aa0-a9ca-46f0-bf9d-e20006c1b53a","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fBBAD197","fieldName":"fBBAD197","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"2b6ef96b-ffa9-4d90-ae91-d8a8dbc9b3c1","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"e4917c0b-4da1-4c03-a35c-e9d58cba2347","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAFCA962","fieldName":"fAFCA962","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"bb550712-eb31-4c46-aa2f-659de3cd8ab1","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"d4da1c14-b5ec-4dbe-ab87-3666961bc3b6","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDBCA765","fieldName":"fDBCA765","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"bd0b1db0-0d1b-4964-b507-4163d00c6261","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a6cc51ea-e613-4da1-b0b0-9bb8d27d93b2","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fADBG545","fieldName":"fADBG545","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"95ff55f6-0571-4500-94ce-f6b620b5e1d8","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a97fc678-60f5-4462-81e1-c89e7462f1e7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDFAF946","fieldName":"fDFAF946","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"59e42e0f-ba80-4081-8954-445203016adc","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"7159db0d-9950-4376-b645-fd081cd24fd7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAAAE199","fieldName":"fAAAE199","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"f6ada857-399e-4a7c-a03b-63b76f024fe2","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"}}]}]},{"cptId":"421204dd-ba81-462b-9ef9-59f8355aba18","cptType":"model","cptTitle":"弹出框","cptClass":"cpt-c cpt-model","options":{"id":"viewRowForHtmlfEBDA352","classes":"box-div","extraClasses":""},"cptChildren":[{"cptId":"a0cecc53-d366-4608-87a7-49b00a4fbc32","cptType":"row","cptTitle":"栅格","cptClass":"cpt-c cpt-row","options":{"id":"","classes":"row","extraClasses":""},"cptChildrenCols":[{"cptId":"26a83a4a-0070-4c84-b457-a0fe55ea3468","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"fdd19f11-f273-4fc7-84f0-9e51e5f6b964","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fCBED266","fieldName":"fCBED266","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"e895a7a2-e489-4f75-98c0-a956a8832912","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"1187a448-bcb4-42cb-93d4-c6866d7e6bd3","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fFBCD191","fieldName":"fFBCD191","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"dca641a9-bcf8-4464-bf88-dab5791abc38","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"8d801aa0-a9ca-46f0-bf9d-e20006c1b53a","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fBBAD197","fieldName":"fBBAD197","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"a85a14ef-a140-451f-9b1f-2bdd63c31fc1","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"e4917c0b-4da1-4c03-a35c-e9d58cba2347","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAFCA962","fieldName":"fAFCA962","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"daccb16e-1e72-40c6-9473-0d78a341621e","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"d4da1c14-b5ec-4dbe-ab87-3666961bc3b6","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDBCA765","fieldName":"fDBCA765","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"c2194504-77cc-46d9-ad31-8cc07b48c129","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a6cc51ea-e613-4da1-b0b0-9bb8d27d93b2","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fADBG545","fieldName":"fADBG545","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"64937337-f57e-4739-8ef3-0641b35d415f","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"a97fc678-60f5-4462-81e1-c89e7462f1e7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fDFAF946","fieldName":"fDFAF946","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"1861d919-5437-4979-b52a-2707acb9bea1","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"},"cptChildren":[{"cptId":"7159db0d-9950-4376-b645-fd081cd24fd7","cptType":"input","cptTitle":"输入框","cptClass":"cpt-c cpt-input","options":{"fieldId":"fAAAE199","fieldName":"fAAAE199","fieldClasses":"form-control","fieldExtraClasses":"form-control-sm","titleText":"标题","titleClasses":"col-form-label","titleExtraClasses":"col-form-label-sm"}}]},{"cptId":"89a2d9c3-e280-4e34-bfaf-64fc45446f11","cptType":"row-col","options":{"id":"","classes":"","extraClasses":"col-xl-4 col-md-6"}}]}]}]}];
    //实例化
    handleGeneratorHtmlOfContainers("2",configs[0],$('#edit-container'));
}

function runHtmlFunc(){
    var tObj = $('[cpt-id=container]');
    
    var configData = [];
    htmlToConfigFunc(tObj,configData);
    
    console.log(configData);
    
    var lastconfigs = configToHtmlFunc(configData);
    return lastconfigs;
}
/** JSON转换为html*/
function configToHtmlFunc(configs){
    var runhtmlObj = $('<div></div>');
    
    var JSstring = [];
    var JSFstring = [];
    
    var lastconfigs = {};
    
    var doHandle2 = function(htmlObj, configData){
        var cptChildren = configData['cptChildren'];
        if(cptChildren && cptChildren.length>0){
            $.each(cptChildren,function(idx,cptOpt){
                 doHandle(htmlObj, cptOpt);
            });
        }
    };
    var doHandle = function(htmlObj,cptOpts){
        var cptType = cptOpts['cptType'];
        var myOpts = cptOpts['options'];
//        console.log(cptType);
        if("container" === cptType){
            var cObj = $('<div id="'+myOpts.id+'"  class="'+ myOpts.classes + ' ' + myOpts.extraClasses+'"></div>');
            htmlObj.append(cObj);
            
            doHandle2(cObj,cptOpts);
        }
        else if("row" === cptType){
            var rowObj = $('<div class="'+myOpts.classes+'"></div>');
            htmlObj.append(rowObj);
            
            var cptChildrenCols = cptOpts.cptChildrenCols;
            $.each(cptChildrenCols,function(i,cptOpt){
                var colOpt = cptOpt['options'];
                var colObj = $('<div class="' + colOpt.classes +' '+ colOpt.extraClasses+ '" ></div>');
                rowObj.append(colObj);
                
                doHandle2(colObj,cptOpt);
            });
        }
        else if("tabs" === cptType){
            var tabHeaderObj = $('<nav><ul class="'+myOpts.headerClasses+' '+myOpts.headerExtraClasses+'" id="'+myOpts.headerId+'" role="tablist"></ul></nav>');
            var tabContentObj = $('<div class="'+myOpts.contentClasses+' '+myOpts.contentExtraClasses+'" id="'+myOpts.contentId+'" ></div>');
            htmlObj.append(tabHeaderObj).append(tabContentObj);
            
            var cptChildrenHeaders = cptOpts.cptChildrenHeaders;
            var cptChildrenContents = cptOpts.cptChildrenContents;
             
            $.each(cptChildrenHeaders,function(i,cptOpt){
                var headerOpt = cptOpt['options'];
                var contentOpt = cptChildrenContents[i]['options'];
                
                var headerObj = $('<li class="nav-item"><a class="'+headerOpt.classes+' '+headerOpt.extraClasses+'" href="#'+contentOpt.id+'" data-toggle="tab" id="'+headerOpt.id+'" >'+headerOpt.title+'</a></li>');
                tabHeaderObj.children('ul').append(headerObj);
                
                var contentObj = $('<div class="'+contentOpt.classes+' '+contentOpt.extraClasses+' " id="'+contentOpt.id+'" "></div>');
                tabContentObj.append(contentObj);
                
                doHandle2(contentObj,cptChildrenContents[i]);
            });
        }
        else if("scroll" === cptType){
            var tabHeaderObj = $('<nav><ul class="'+myOpts.headerClasses+' '+myOpts.headerExtraClasses+'" id="'+myOpts.headerId+'" role="tablist"></ul></nav>');
            var tabContentObj = $('<div data-spy="scroll" class="'+myOpts.contentClasses+' '+myOpts.contentExtraClasses+'" id="'+myOpts.contentId+'"></div>');
            htmlObj.append(tabHeaderObj).append(tabContentObj);
            
            var cptChildrenHeaders = cptOpts.cptChildrenHeaders;
            var cptChildrenContents = cptOpts.cptChildrenContents;
            
            $.each(cptChildrenHeaders,function(i,cptOpt){
                var headerOpt = cptOpt['options'];
                var ontentOpt = cptChildrenContents[i]['options'];
                
                var headerObj = $('<li class="nav-item"><a  class="'+headerOpt.classes+' '+headerOpt.extraClasses+'" href="#'+contentOpt.id+'" id="'+headerOpt.id+'" >'+headerOpt.title+'</a></li>');
                tabHeaderObj.children('ul').append(headerObj);
                
                var contentObj = $('<div class="'+contentOpt.classes+' '+contentOpt.extraClasses+' " id="'+contentOpt.id+'" ></div>');
                tabContentObj.append(contentObj);
               
                doHandle2(contentObj,cptChildrenContents[i]);
            });
            
        }
        else if("div" === cptType){
            var divObj = $('<div class="'+myOpts.classes+' '+ myOpts.extraClasses+'" id="'+myOpts.id+'"></div>');
            htmlObj.append(divObj);
            doHandle2(divObj,cptOpts);
        }
        else if("model" === cptType){
            var divObj = $('<div class="'+myOpts.classes+' '+ myOpts.extraClasses+'" id="'+myOpts.id+'"></div>');
            htmlObj.append(divObj);
            doHandle2(divObj,cptOpts);
        }
        else if("input" === cptType){
            var inputObj = $('<div class="form-group"><label class="'+myOpts.titleClasses+' '+myOpts.titleExtraClasses+'">'+myOpts.titleText+'</label>'
                    +'<input type="text" class="'+myOpts.fieldClasses+' '+myOpts.fieldExtraClasses+'" id="'+myOpts.fieldId+'" name="'+myOpts.fieldName+'" ></div>');
            htmlObj.append(inputObj);
        }
        else if("select" === cptType){
            var inputObj = $('<div class="form-group"><label class="'+myOpts.titleClasses+' '+myOpts.titleExtraClasses+'">'+myOpts.titleText+'</label>'
                    +'<select type="text" class="'+myOpts.fieldClasses +' '+myOpts.fieldExtraClasses+'" id="'+myOpts.fieldId+'" name="'+myOpts.fieldName+'" >'
                    +'<option value="">请选择</option>'
                    +'</select></div>');
            htmlObj.append(inputObj);
        }
        else if("button" === cptType){
            var buttonObj = $('<button type="button" class="'+myOpts.classes+" "+myOpts.extraClasses+'" id="'+myOpts.id+'" >'+myOpts.text+'</button>');
            htmlObj.append(buttonObj);
        }
        else if("table" === cptType){
            var tableObj = $('<div class="'+myOpts.classes+' '+ myOpts.extraClasses+'" style=""><div class="p-1" id="'+myOpts.tbid+'" style="">'
                    +'<button class="btn btn-info btn-sm" type="button" onclick="addRowFor'+myOpts.id+'();">新增</button>'
                    +'</div>'
                    +'<table id="'+myOpts.id+'" ></table>'
                    +'</div>');
            htmlObj.append(tableObj);
            JSstring.push("    zUtil['BstTable'].tableInit('#"+myOpts.id+"', "+zUtil.strify(myOpts.tableOpts)+");");
            //addRowFor;editRowFor;viewRowFor;delRowFor
            
            JSFstring.push("function addRowFor"+myOpts.id+"(){"
                  +"SimpleBsDialog.show({"
                    +"id: 'addRowForDlg"+ myOpts.id+ "',"
                    +"title: '新增',"
                    +"spinner: true,"
                    +"html:$('#addRowForHtml"+myOpts.id+"').html(),"
                    +"fullScreen: true, "
                    +"cssClass: '',"
                    +"buttons: ["
                    +"     {           "
                    +"        id: 'btn-save', "
                    +"       label: 'save',"
                    + "       cssClass: 'btn-primary',"
                    +"        action: function(dialogRef) {"
                    +"            dialogRef.close();"
                   +"         },"
                   +"     }"
                   +"     ,{           "
                   +"        id: 'btn-close', "
                   +"       label: 'close',"
                   + "       cssClass: 'btn-info',"
                   +"        action: function(dialogRef) {"
                   +"            dialogRef.close();"
                  +"         },"
                  +"     }"
                   +" ],"
                   +" onShown: function(dialogRef) {"
                   +"    setTimeout(function() {"
                   +"         dialogRef.set({"
                   +"             'spinner': false,"
                   +"        });"
                   +"        dialogRef.getButtons().prop('disabled', false);"
                   +"     }, 200);"
                   +"   },"
                   +"});"
              +" }");
        }
        else if("stackedBar" === cptType){
            var chartsObj = '<div class="'+myOpts.classes+'" id ="'+myOpts.id+'" style="'+myOpts.styles+'"></div>';
            htmlObj.append(chartsObj);
            
            JSstring.push("    var myChart"+myOpts.id+" = echarts.init($('#"+myOpts.id+"')[0]);\n"
                         +"    myChart"+myOpts.id+".setOption("+zUtil.strify(myOpts.chartOpts)+");");
        }else{
             
        }
    };
    
    doHandle(runhtmlObj,configs[0]);
    
    var htmlstr = runhtmlObj.html();
    htmlstr = '<body '+htmlstr.trim().substr(4,htmlstr.length-10) + '</body>';
    
    lastconfigs['htmlContent'] = htmlstr;
    lastconfigs['jsContent'] = "<script type=\"text\/javascript\">"
        +" $(function(){"
         + JSstring.join("\n\n") 
         +"});"
        + JSFstring.join("\n\n")
         + "</script>";
    console.log(lastconfigs['jsContent']);
    return lastconfigs;
}
/** html转换为JSON*/
function htmlToConfigFunc(tObj, configData){
    var cptId = tObj.attr("cpt-id");
    var cptType = tObj.attr("cpt-type");
    var cptViewsObj = tObj.children('.cpt-views');
    var cptOptionsObj = tObj.children('.cpt-options');
//    console.log("----"+cptType);
//    console.log(JSON.stringify(configData));
    
    var opts = JSON.parse(cptOptionsObj.html());
    var newOpts = $.extend({},opts);
    configData.push(newOpts);
    
    var handleChildrenObjFunc = function(cptType,childObjs,opts){
        if($.inArray(cptType, layoutEls)!=-1){
            var childOpts = opts['cptChildren']?opts['cptChildren']:[];
            opts['cptChildren'] = childOpts;
            if(childObjs.length>0){
                childObjs.each(function(idx,item){
                    htmlToConfigFunc($(item), childOpts);
                });
            }
        }
    };
    
    var childrensObj = [];
    if("row" === cptType){
        childrensObj = cptViewsObj.children().children();
//        console.log(newOpts);
        childrensObj.each(function(i,item){
            var cptTypeCol = $(item).attr("cpt-type");
            var coli = newOpts["cptChildrenCols"][i];
            var childsObj = $(item).children('.cpt-c');
            if(childsObj.length>0){
                childsObj.each(function(i2,item2){
                      handleChildrenObjFunc(cptTypeCol,$(item2), coli);
                });
            }
        });
    }
    else if("tabs" === cptType){
        childrensObj = cptViewsObj.children('.tab-content').children();
        
        childrensObj.each(function(i,item){
            var cptTypeC = $(item).attr("cpt-type");
            var contenti = newOpts["cptChildrenContents"][i];
            var childsObj = $(item).children('.cpt-c');
            if(childsObj.length>0){
                childsObj.each(function(i2,item2){
                      handleChildrenObjFunc(cptTypeC,$(item2), contenti);
                });
            }
        });
    }else if("scroll" === cptType){
        childrensObj = cptViewsObj.children('.scroll-content').children();
        
        childrensObj.each(function(i,item){
            var cptTypeC = $(item).attr("cpt-type");
            var contenti = newOpts["cptChildrenContents"][i];
            var childsObj = $(item).children('.cpt-c');
            if(childsObj.length>0){
                childsObj.each(function(i2,item2){
                      handleChildrenObjFunc(cptTypeC,$(item2), contenti);
                });
            }
        });
    }else if("div" === cptType){
        childrensObj = cptViewsObj.children().children('.cpt-c');
        handleChildrenObjFunc(cptType, childrensObj,newOpts);
    }else if("model" === cptType){
        childrensObj = cptViewsObj.children().children('.cpt-c');
        handleChildrenObjFunc(cptType, childrensObj,newOpts);
    }
    else if("container" === cptType){
        childrensObj = cptViewsObj.children('.cpt-c');
        handleChildrenObjFunc(cptType, childrensObj,newOpts);
    }else{
        childrensObj = cptViewsObj.children('.cpt-c');
        handleChildrenObjFunc(cptType, childrensObj,newOpts);
    }
}

/** 选中组件*/
function initSelectCptFunc(){
    doCptClearSelected();
    if($('.edit-content').hasClass('edit')){
        $('.edit-content').on('click','div[cpt-type]',initSelectCptForHandle);
    }else{
        $('.edit-content').off('click','div[cpt-type]',initSelectCptForHandle);
    }
}
function initSelectCptForHandle(e){
        var cptId = $(this).attr("cpt-id");
        var p = $(e.target).closest("div[cpt-type]");
        var cptType = p.attr('cpt-type');
        
        if(cptId === p.attr("cpt-id") ){
            WholeFlag['selectedId'] = cptId;
            if($(this).children('.cpt-handles').length == 0){
                var operationObj = '<div class="cpt-handles">';
                
                var buttons = [];
                
                if($.inArray(cptType, containerEls)!=-1){
                    buttons.push('<a href="javascript:void(0)" class="text-warning" onclick="doCptRefresh(\''+cptId+'\');" title="重载"><i class="fa fa-refresh"> </i></a>');
                }
                if($.inArray(cptType, layoutEls)!=-1 && "row" !== cptType && "tabs" !== cptType
                    && "scroll" !== cptType){
                    buttons.push('<a href="javascript:void(0)" class="text-info" onclick="addCptHtmlFunc(\''+cptId+'\');" title="快捷添加"><i class="fa fa-plus"> </i></a>');
                }
                if("row" === cptType){
                        buttons.push('<a href="javascript:void(0)" class="text-info" onclick="doCptAddRowCol(\''+cptId+'\',\'1\');" title="追加单元格"><i class="fa fa-plus-square-o"> </i></a>');
                }
                if("row-col" === cptType){
                    buttons.push('<a href="javascript:void(0)" class="text-info" onclick="doCptAddRowCol(\''+cptId+'\',\'2\');" title="复制单元格"><i class="fa fa-plus-square-o"> </i></a>');
                }
                var addflag ="container" === cptType || "tab-contenti" === cptType || "scroll-contenti" === cptType;
                if(addflag || "div" === cptType || "model" === cptType){
                     buttons.push('<a href="javascript:void(0)" class="text-danger" onclick="doCptRemove(\''+cptId+'\',\'clear\');" title="清空内容"><i class="fa fa-trash-o"> </i></a>');
                }
                if(!addflag){
                     buttons.push('<a href="javascript:void(0)" class="text-danger" onclick="doCptRemove(\''+cptId+'\',\'remove\');" title="移除"><i class="fa fa-remove"> </i></a>');
                }
                
                operationObj += buttons.join("&nbsp;") +'</div>';
                operationObj = $(operationObj);
                $('.edit-content').find('.cpt-handles').remove();
                $('.edit-content').find('.cpt-c-selected').removeClass('cpt-c-selected');
                $(this).addClass('cpt-c-selected');
                $(this).append(operationObj);
            }
           
        }
    return;
}
//移除组件
function doCptRemove(cptId, type){
    var  t = $('.edit-content').find('[cpt-id='+cptId+']');
    var cptType = t.attr('cpt-type');
    if("remove" === type){
        if("row-col" === cptType){
            var n = t.siblings("div");
            if(n.length < 1){
                $('#liveToast .toast-body').html("栅格必须保留至少一个单元格");
                $('#liveToast').toast('show');
                return;
            }
        }
        t.remove();
    }else if("clear" === type){
        if("container" === cptType){
            t.children('.cpt-views').empty();
        }
        else if("div" === cptType){
            t.children('.cpt-views').children().empty();
        }
        else if("model" === cptType){
            t.children('.cpt-views').children().empty();
        }
        else if("tab-contenti" === cptType || "scroll-contenti" === cptType){
            t.children().not(".cpt-handles").remove();
        }
    }
}
//清理选中样式
function doCptClearSelected(){
    $('.edit-content').find('.cpt-handles').remove();
    $('.edit-content').find('.cpt-c-selected').removeClass('cpt-c-selected');
}
//重载数据
function doCptRefresh(cptId){
    $('#edit-container').empty();
    initContainerFunc();
}
//增加栅格单元格
function doCptAddRowCol(cptId, type){
    var htmlObj = null;
            
    var  t = $('.edit-content').find('[cpt-id='+cptId+']');
    var cptType = t.attr('cpt-type');
    if("1" === type){
         if("row" === cptType){
           var trow  = t.children('.cpt-views').children(".row");
             var cptIdcol = zUtil.uuid();
             var addhtml = trow.children().last().clone();
             addhtml.empty().attr("cpt-id",cptIdcol);
             trow.append(addhtml);
          }
         htmlObj = trow;
    }else if("2" === type){//复制
         if("row-col" === cptType){
              var cptIdcol = zUtil.uuid();
              var addhtml = t.clone();
              addhtml.empty().removeClass('ui-sortable ui-sortable-handle cpt-c-selected')
              .find('.cpt-handles').remove();
              addhtml.attr("cpt-id",cptIdcol);
              addhtml.insertAfter(t);
              
              htmlObj = t.parent().parent().parent();
         }
    }
   
    
    handleGeneratorHtmlForSortable(cptType, htmlObj);
}


//便捷追加元素
function addCptHtmlFunc(cptId){
    //选中ID保存一下
    var selectObj = $('.edit-content').find('div[cpt-id='+cptId+']');
    var cptType =  selectObj.attr("cpt-type");
    
    //获取组件并弹出
    SimpleBsDialog.show({
        id:"addInputHtmlDlg",
        title: '快捷追加元素',
        spinner: true,
        load:'./editForAddHtml.html',
        fullScreen: true, 
        cssClass: '',
        buttons: [
             {
                id: 'btn-close',
                label: 'close',
                cssClass: 'btn-info',
                action: function(dialogRef) {
                    dialogRef.close();
                },
            }
             ,{
                 id: 'btn-ok',
                 label: 'OK',
                 cssClass: 'btn-primary',
                 action: function(dialogRef) {
                     var selectObj = $('.edit-content').find('[cpt-id='+cptId+']');
                     var cptType =  selectObj.attr("cpt-type");
                     
                     //保存内容
                     //获取属性
                     var entityTypeVal = $('#addInputHtmlDlg #entityType').selectpicker('val');
                     var rowTypeVal = $('#addInputHtmlDlg #rowType').selectpicker('val');
                     var colSizeVal = $('#addInputHtmlDlg #colSize').selectpicker('val');
                     var colNumsVal = $('#addInputHtmlDlg #colNums').val();
                     var colNums1Val = $('#addInputHtmlDlg #colNums1').val();
                     var colNums2Val = $('#addInputHtmlDlg #colNums2').val();
                     var colNums3Val = $('#addInputHtmlDlg #colNums3').val();
                     var trs = $('#addInputHtmlDlg #entityDiv>tbody>tr');
                     
                     if(trs.length < 1){
                         $('#liveToast .toast-body').html("至少增加一个字段");
                         $('#liveToast').toast('show');
                         return;
                     }
//                     console.log(zUtil.valAll('#addInputHtmlDlg #entityDiv'));
                     var inputsArr = [];
                     var cols = [];
                     //初始化组件
                     trs.each(function(i,e){
                         var type = $(e).find('[name=type]').selectpicker('val');
                         var id = $(e).find('[name=id]').val();
                         var code = $(e).find('[name=code]').val();
                         var title = $(e).find('[name=title]').val();
                         var classes = $(e).find('[name=classes]').val();
                         if(!id || !title){
                             $('#liveToast .toast-body').html("信息必须填写完整");
                             $('#liveToast').toast('show');
                             return;
                         }
                         var cinfo = {"id":id,"field":code,"title":title};
                         
                         var cptTitle = "";
                         if(type==="select"){
                             cptTitle = "下拉框";
                         } else{
                             cptTitle = "输入框";
                         }
                         //封装属性
                         var tOpts = {
                                 "cptId": zUtil.uuid(),
                                 "cptType": type,
                                 "cptTitle": cptTitle,
                                 "cptClass": "cpt-c cpt-"+type,
                                 "options":{
                                     "fieldId": id,
                                     "fieldName": code,
                                     "fieldClasses": 'form-control',
                                     "fieldExtraClasses": 'form-control-'+classes,
                                     "titleText": title,
                                     "titleClasses": 'col-form-label',
                                     "titleExtraClasses": 'col-form-label-'+classes,
                                 }
                         }
                         
                         inputsArr.push(tOpts);
                         
                         cols.push(cinfo);
                     });
                     
                     
                     var nowobj = null;
                     if("container" === cptType){
                         nowobj = selectObj.children('.cpt-views');
                     }
                     else if("div" === cptType){
                         nowobj = selectObj.children('.cpt-views').children();
                     }
                     else if("model" === cptType){
                         nowobj = selectObj.children('.cpt-views').children();
                     }
                     else if("row-col" === cptType){
                         nowobj = selectObj;
                     }
                     else if("tab-contenti" === cptType){
                         nowobj = selectObj;
                     }
                     else if("scroll-contenti" === cptType){
                         nowobj = selectObj;
                     }else{
                         nowobj = selectObj;
                     }
                     
                     
                     var handleRowsFunc =function(flag,linkid){
                         var rowNums = "";
                         var rowNums2 = 0;
                         if("1" === rowTypeVal){
                             rowNums2 = 0;
                         }else {
                             var tnums = colNumsVal;
                             if("2" === rowTypeVal){
                                 rowNums2 = Math.ceil(inputsArr.length/colNumsVal);
                             }else if("3" === rowTypeVal){
                                 rowNums2 = 1;
                                 tnums = colNumsVal*(Math.ceil(inputsArr.length/colNumsVal));
                             }
                             var c1 ="",c2 ="",c3 ="";
                             for(var i=0; i<tnums; i++){
                                 c1 += (i>0?" "+colNums1Val:colNums1Val);
                                 if(colSizeVal.length>1){
                                     c2 += (i>0?" "+colNums2Val:colNums2Val);
                                 }
                                 if(colSizeVal.length>2){
                                     c3 += (i>0?" "+colNums2Val:colNums2Val);
                                 }
                             }
                             rowNums = c1;
                             if(colSizeVal.length>1){
                                 rowNums += "," + c2;
                             }
                             if(colSizeVal.length>2){
                                 rowNums += "," + c3;
                             }
                         }
                         
                         
                         var dlgObj = null;
                         if(flag){
                             var lastopts = {
                                     "cptId": zUtil.uuid(),
                                     "cptType": "model",
                                     "cptTitle": "弹出框",
                                     "cptClass": "cpt-c cpt-model",
                                     "options":{
                                         "id": linkid,
                                         "classes": "box-div",
                                         "extraClasses": "",
                                     }
                             }
                             
                             dlgObj = handleGeneratorHtmlOfModels("2",lastopts,$('[cpt-id=container]').children('.cpt-views'));
                         }
                         
                         var rowsObjs = [];
                         
                         //需要栅格
                         if(rowNums2>0){
                             //栅格
                             var colSizeGroups = colSizeVal.toString().split(",");
                             var colNumGroups = rowNums.split(",");
                             var colSizeNums = colSizeGroups.length;
                             var kvMaps = {};
                             for(var k=0; k<colSizeNums; k++){
                                 var t = colNumGroups[k].split(" ");
                                 var colNums = t.length;
                                 for(var j=0;j<colNums;j++){
                                     var colclass =  colSizeGroups[k] + "-" + t[j];
                                     if(kvMaps[j]){
                                         kvMaps[j] = kvMaps[j] +" "+ colclass;
                                     }else{
                                         kvMaps[j] = colclass;
                                     }
                                 }
                             }
                             
                             var j=0;
                             for(var i=0; i<rowNums2; i++){
                                 //封装属性
                                 var colsOpt = [];
                                 var lastopts = {
                                         "cptId": zUtil.uuid(),
                                         "cptType": "row",
                                         "cptTitle": "栅格",
                                         "cptClass": "cpt-c cpt-row",
                                         "options":{
                                             "id": "",
                                             "classes": "row",
                                             "extraClasses": '',
                                         },
                                         "cptChildrenCols": colsOpt,
                                 };
                                 $.each(kvMaps,function(i,colclass){
                                     var optCol = {
                                             "cptId": zUtil.uuid(),
                                             "cptType": "row-col",
                                             "options":{
                                                 "id": "",
                                                 "classes": "",
                                                 "extraClasses": colclass
                                             }
                                     };
                                     colsOpt.push(optCol);
                                 });
                                 
                                 var rowObj = handleGeneratorHtmlOfRows("2",lastopts
                                          , flag?dlgObj.children('.cpt-views').children():nowobj);
                                 var colObjs = rowObj.find('[cpt-type=row-col]');
                                 $.each(colObjs,function(idx,item){
                                     if(idx >= inputsArr.length - j){
                                        return false;
                                     }
                                     var iopts = inputsArr[idx+j];
                                     if(iopts.cptType =='select'){
                                         handleGeneratorHtmlOfSelects("2",iopts,$(item));
                                     }else{
                                        handleGeneratorHtmlOfInputs("2",iopts,$(item));
                                     }
                                 });
                                 j = j + colObjs.length;
                             }
                         }else{
                             for(var i=0,j=0; i<inputsArr.length; i++){
                                 var iopts = inputsArr[i];
                                 if(iopts.cptType =='select'){
                                      handleGeneratorHtmlOfSelects("2",iopts,flag?dlgObj.children('.cpt-views').children():nowobj);
                                 }else{
                                      handleGeneratorHtmlOfInputs("2",iopts,flag?dlgObj.children('.cpt-views').children():nowobj);
                                 }
                             }
                         }
                     };
                     
                     if("1" === entityTypeVal){
                         handleRowsFunc(false);
                     }else if("2" === entityTypeVal){
                         //需要同时生成另外几个容器
                         var id = createFieldNo();
                         var tbid = 'tb-'+id;
                         var tableOpts = {
                                 toolbar:'#'+tbid,
                                 height: 400,
                                 columns: cols,
                                data: {
                                    total: 100,
                                    rows:[]
                                }
                         };
                         
                         var lastopts = {
                                 "cptId": zUtil.uuid(),
                                 "cptType": "table",
                                 "cptTitle": "重复表",
                                 "cptClass": "cpt-c cpt-table",
                                 "options":{
                                      "id": id,
                                      "classes": "box-table",
                                      "extraClasses": "",
                                      "tbid": tbid,
                                      "tableOpts": tableOpts,
                                 }
                         }
                        var tableObj = handleGeneratorHtmlOfTables("2",lastopts,nowobj);
                        handleRowsFunc(true,"addRowForHtml"+id);
                        handleRowsFunc(true,"editRowForHtml"+id);
                        handleRowsFunc(true,"viewRowForHtml"+id);
                    }
                     
                     dialogRef.close();
                 },
             },
        ],
        onShow: function(dialogRef) {
             
        },
        onShown: function(dialogRef) {
            var coldata = [{id:'col-xl',text:'col-xl≥1200'},{id:'col-lg',text:'col-lg≥992'},{id:'col-md',text:'col-md≥768'},{id:'col-sm',text:'col-sm≥576'},{id:"col",text:'col<576'}];
            
            $('#addInputHtmlDlg #colSize').each(function(i,e){
                $.each(coldata,function(i,item){
                     $(e).append('<option value="'+item['id']+'">'+item['text']+'</option>');
                });
             });
             $('#addInputHtmlDlg #colSize').selectpicker({
                maxOptions: 3,
                style: "btn-none",
             });
             
             $("#addInputHtmlDlg #colNums").inputSpinner();
             $("#addInputHtmlDlg #colNums1").inputSpinner();
             $("#addInputHtmlDlg #colNums2").inputSpinner();
             $("#addInputHtmlDlg #colNums3").inputSpinner();
             
             var entitydata = [{id:"1",text:'单体对象'},{id:'2',text:'集合对象'}];
             
             $('#addInputHtmlDlg #entityType').empty();
             $('#addInputHtmlDlg #entityType').each(function(i,e){
                 $.each(entitydata,function(i,item){
                      $(e).append('<option value="'+item['id']+'">'+item['text']+'</option>');
                 });
             });
             $('#addInputHtmlDlg #entityType').selectpicker({
                    style: "btn-none"
             });
             var rowTypeDt = [{id:"1",text:'无栅格'},{id:'2',text:'独立行'},{id:'3',text:'公用行'}];
             $('#addInputHtmlDlg #rowType').empty();
             $('#addInputHtmlDlg #rowType').each(function(i,e){
                 $.each(rowTypeDt,function(i,item){
                      $(e).append('<option value="'+item['id']+'">'+item['text']+'</option>');
                 });
             });
             $('#addInputHtmlDlg #rowType').selectpicker({
                    style: "btn-none"
             });
             $('#addInputHtmlDlg #rowType').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                 var thisVal = $(this).val();
                 if("1" === thisVal){
                     $('#addInputHtmlDlg #colNums').val("1");
                     $('#addInputHtmlDlg #colNums').attr("readonly","readonly");
                     $('#addInputHtmlDlg .js-colNums').hide();
                 }else {
                     $("#addInputHtmlDlg #colNums").removeAttr("readonly","readonly");
                     var colSize = $('#addInputHtmlDlg #colSize').selectpicker('val');
                     if(colSize && colSize.length>0){
                         for(var i=0;i<colSize.length+2;i++){
                            $('#addInputHtmlDlg .js-colNums:eq('+i+')').show();
                         }
                     }
                 }
             });
             $('#addInputHtmlDlg #colSize').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
                 var thisVal = $(this).selectpicker('val');
                 $("#addInputHtmlDlg .js-colNums").hide();
                 if(thisVal && thisVal.length>0){
                     for(var i=0;i<thisVal.length+2;i++){
                         $('#addInputHtmlDlg .js-colNums:eq('+i+')').show();
                     }
                 }else{
                     $('#addInputHtmlDlg .js-colNums:eq(0)').show();
                 }
             });
             
             $('#addInputHtmlDlg #colSize').selectpicker('val','col-xl');
             $('#addInputHtmlDlg #rowType').selectpicker('val',"1");
             $('#addInputHtmlDlg #entityType').selectpicker('val',"1");
             $('#addInputHtmlDlg #entityDiv>tbody').empty();
             $("#addInputHtmlDlg #colNums").val("1");
             $("#addInputHtmlDlg #colNums1").val("6");
             $("#addInputHtmlDlg #colNums2").val("6");
             $("#addInputHtmlDlg #colNums3").val("6");
             $("#addInputHtmlDlg #colNums").attr("readonly","readonly");
             
             
             setTimeout(function() {
                 dialogRef.set({
                     'spinner': false,
                 });
                 dialogRef.getButtons().prop('disabled', false);
             }, 200);
             
        },
    });
   
    
}
function addCptHtmlForAddJson(){
    //获取组件并弹出
    SimpleBsDialog.show({
        id:"addInputJsonDlg",
        title: 'json录入',
        spinner: true,
        load:'./editForAddHtml2.html',
        width: 600, 
        height: 500, 
        cssClass: '',
        buttons: [
             {
                id: 'btn-close',
                label: 'close',
                cssClass: 'btn-info',
                action: function(dialogRef) {
                    dialogRef.close();
                },
            },{
                id: 'btn-ok',
                label: 'OK',
                cssClass: 'btn-primary',
                action: function(dialogRef) {
                    var jsonval = $('#addInputJsonDlg #json-area').next('.CodeMirror')[0].CodeMirror.getValue();
                    console.log(jsonval);
                    jsonval = zUtil.parse(jsonval);
                    if(jsonval){
                          $.each(jsonval,function(i,item){
                              addCptHtmlForAddRow({
                                  title: item['fieldTitle']
                                  ,id:  item['fieldJavaCode']
                                  ,name:  item['fieldJavaCode']
                              });
                          });
                    }
                }
            }
         ]
      ,onShown: function(dialogRef) {
          setTimeout(function() {
              dialogRef.set({
                  'spinner': false,
              });
              dialogRef.getButtons().prop('disabled', false);
          }, 200);
          
          var editorObj = $('#addInputJsonDlg #json-area').next('.CodeMirror');
          var JSInfoDlgEditor = null;
          if(editorObj.length === 0){
             JSInfoDlgEditor = CodeMirror.fromTextArea($('#addInputJsonDlg #json-area')[0], {
                  autoRefresh:true,
                  lineNumbers: true,
                  styleActiveLine: true,
                  matchBrackets: true,
                  lineWrapping: true,
                  mode:"text/javascript",
             });
             JSInfoDlgEditor.setSize('100%','100%');
          }else{
             JSInfoDlgEditor = editorObj[0].CodeMirror;
          }
          JSInfoDlgEditor.setValue(" ");
      }
    });
}
function addCptHtmlForAddRow(options){
    var tid = createFieldNo();
    var opts = $.extend(true,{
        id: tid,
        name: tid,
        title: "标题",
        type: "input",
    }, options) 
    var uuid = zUtil.uuid();
    var dstr = '<tr id="'+uuid+'">'
         +'<td><button class="btn btn-link btn-sm" type="button" onclick="addCptHtmlForDelRow(\''+uuid+'\');">移除</button></td>'
         +'<td><select class="form-control form-control-sm" name="type"></select></td>'
         +'<td><select class="form-control form-control-sm" name="classes"></select></td>'
         +'<td><input type="text" class="form-control form-control-sm" name="id" value="'+opts.id+'" /></td>'
         +'<td><input type="text" class="form-control form-control-sm" name="code" value="'+opts.name+'" /></td>'
         +'<td><input type="text" class="form-control form-control-sm" name="title" value="'+opts.title+'" /></td>'
//         +'<td><select class="form-control form-control-sm" name="listNeed"></select></td>'
//         +'<td><select class="form-control form-control-sm" name="addNeed"></select></td>'
//         +'<td><select class="form-control form-control-sm" name="editNeed"></select></td>'
//         +'<td><select class="form-control form-control-sm" name="detailNeed"></select></td>'
//         +'<td><select class="form-control form-control-sm" name="delNeed"></select></td>'
         +'</tr>';
    dstr = $(dstr);
    $('#addInputHtmlDlg #entityDiv>tbody').append(dstr);
    
    var typedata = [
        {
            id: "input",
            text: '输入框'
        },
        {
            id: 'select',
            text: '下拉框'
        }
    ];
    $.each(typedata,function(i,item){
        dstr.find('select[name="type"]').append('<option value="'+item['id']+'">'+item['text']+'</option>');
    });
    dstr.find('select[name="type"]').selectpicker({
        style: "btn-none"
    });
    var classdata = [
        {   id: "sm",
            text: '小'
        },
        {id: 'md',
          text: '中'
        },
        {id: 'lg',
            text: '大'
        }
    ];
    $.each(classdata,function(i,item){
        dstr.find('select[name="classes"]').append('<option value="'+item['id']+'">'+item['text']+'</option>');
    });
    dstr.find('select[name="classes"]').selectpicker({
        style: "btn-none"
    });
    dstr.find('select[name="type"]').selectpicker('val',opts.type);
}
function addCptHtmlForDelRow(uuid){
    $("#"+uuid).remove();
}



//编码
function createFieldNo(){
    return 'fxxxxyyy'.replace(/[xy]/g, function(c) {
        if(c==="x"){
            var arrayIdx = ["A","B","C","D","E","F","G"];
            var randomItem = arrayIdx[Math.floor(Math.random() * arrayIdx.length)];
            return randomItem;
        }else  if(c==="y"){
            var arrayIdx = ["1","2","3","4","5","6","7","9","9"];
            var randomItem = arrayIdx[Math.floor(Math.random() * arrayIdx.length)];
            return randomItem;
        }
    });
};

function initMenuToggle(){
    $(".menu-content > ul > .boxes").hide();
    $(".menu-content .nav-header").click(function() {
        var display = $(this).next().css('display');
        if(!display || display !== "none"){
            $(this).next().slideUp();
        }else{
            $(this).next().slideDown();
        }
    });
}

//初始化参数校验
function initDragButtonToggle() {
    $(".menu-content .preview input[name=number],.menu-content .preview input[name=number2]").on("keyup", function() {
        var numberVal = $(this).val();
        if(numberVal){
           numberVal = numberVal.trim().replace(regxBlank," ");
        }
        var typeVal = $(this).parent().parent().find('[name=type]').val();
        var showFlag = true;
        if(typeVal === "row"){
            var sizeVal = $(this).parent().find('[name=size]').val();
            var number2Val = $(this).parent().find('[name=number2]').val();//至少一个
            
            var n = initDragButtonToggleForRow(numberVal,sizeVal.toString(),number2Val);
            
            if (!n) {
                showFlag = true;
            } else {
                showFlag = false;
            }
        }else if(typeVal === "input" || typeVal === "select"){
            if(!numberVal){
                showFlag = false;
            }else{
                numberVal = parseInt(numberVal);
                if (numberVal > 0 && numberVal <= 50) {
                    showFlag = true;
                }else{
                    showFlag = false; 
                }
            }
        }else if(typeVal === "tabs" || typeVal === "scroll"){
            if(!numberVal){
                showFlag = false;
            }else{
                numberVal = parseInt(numberVal);
                if (numberVal > 1 && numberVal <= 15) {
                    showFlag = true;
                }else{
                    showFlag = false; 
                }
            }
        }
        if (showFlag) {
            $(this).parent().siblings(".operation").show()
        } else {
            $(this).parent().siblings(".operation").hide();
        }
    })
}
function initDragButtonToggleForRow(numberVal,sizeVal,number2Val) {
    var limitnum = 3;
    var n = false;
    if(!number2Val || !numberVal || !sizeVal){
        n = true;
        return n;
    }else{
        var intnum2 = parseInt(number2Val);
        if (intnum2 < 1 || intnum2 > 100){
            n = true;
            return n;
        }
        var sizeGroups = sizeVal.split(",");
        var numGroups = numberVal.split(",");
        if(numGroups.length > limitnum || sizeGroups.length > limitnum || numGroups.length != sizeGroups.length){
            n = true;
        }else{
            var kvMaps = {};
            
            for(var k=0;k<numGroups.length;k++){
                var item = numGroups[k];
                var tarr = item.split(" ");//最多
                if(tarr.length > 300){
                    n = true;
                    break;
                }
                kvMaps[k] = tarr;
                if(k>0){
                    if(kvMaps[0].length != kvMaps[k].length){
                        n = true;
                        break;
                    }
                }
            }
            if(!n){
                for(var k=0; k < limitnum && k < numGroups.length;k++){
                    var t = kvMaps[k];
                    for(var j=0; j < t.length; j++){
                        if(!t[j]){
                            n = true;
                            break;
                        }else{
                            var intnum = parseInt(t[j]);
                            if (t[j].length != intnum.toString().length || intnum < 1 || intnum > 12){
                                n = true;
                                break;
                            }
                        }
                    }
                    if(n){
                        break;
                    }
                }
            }
        }
    }
    
    return n;
}

function initDragCptFunc(){
    $(".menu-content .layoutbox,.menu-content .elbox").draggable({
        connectToSortable: ".cpt-container>.cpt-views",
        containment: "window",
        handle: ".drag",
        cursor: "move",
        addClasses: false,
        appendTo:"body",
        cursorAt: { right: 0 },//初始光标位置
        distance: 5,//生效距离
        iframeFix: true,
        scroll: true,
        scrollSensitivity: 30,
        revert: "invalid",
        zIndex: 9999,
        helper: function(e) {
            return handleGeneratorHtmlForDragOpts("1",e,null);
        },
        stop: function(e, ui) {
            handleGeneratorHtmlForDragOpts("2",e,ui);
        },
        drag: function(e, ui) {
        },
        start: function(event, ui) {
           if(!$('#edit-content').hasClass("edit")){
             return false;
           };
        }
    });
}

//实例化入口
function handleGeneratorHtmlForDragOpts(handleType,e,ui){
    var lastHtmlObj = $('<div class="drag-cpt-c"><div></div></div>');
    var nowDragObj = handleType==="1"? $(e.currentTarget): $(e.target);
    var cptType = nowDragObj.find('.preview [name=type]').val();
    var cptTitle = nowDragObj.find(".preview>div:first>span").text();
    
    var firstOptions = {};
    firstOptions['cptType'] = cptType;
    firstOptions['cptTitle'] = cptTitle.replace(regxBlank," ");
    
    if(cptType === "row" || cptType === "select" || cptType === "input"){
        var sizeVal = nowDragObj.find('.preview [name=size]').val();
        var numVal = nowDragObj.find('.preview [name=number]').val();
        var numVal2 = nowDragObj.find('.preview [name=number2]').val();
        if(numVal){
            numVal = numVal.trim().replace(regxBlank," ");
        }
        if(numVal2){
            numVal2 = numVal2.trim().replace(regxBlank," ");
        }
        
        firstOptions['size'] = sizeVal.toString();
        firstOptions['number'] = numVal;
        firstOptions['number2'] = numVal2;
    }else if(cptType === "tabs" || cptType === "scroll"){
        var numVal = nowDragObj.find('.preview [name=number]').val();
        if(numVal){
            numVal = numVal.trim().replace(regxBlank," ");
        }
        firstOptions['number'] = numVal;
    } else if(cptType === "button"){
        var sizeVal = nowDragObj.find('.preview [name=size]').val();
        firstOptions['size'] = sizeVal;
    }
    
    //放置到容器
    if(handleType ===  "1"  || ("2" === handleType && ui.helper.parents('.cpt-container').length>0)){
        var parentObj = null;
        
        if("2" === handleType){
            parentObj = ui.helper.parent();
            ui.helper.addClass("cpt-c-none");
            ui.helper.remove();
        }
        
        if("container" === cptType){
            var lastopts = {
                    "cptId" : "container",
                    "cptType" : "container",
                    "cptTitle" : "主容器 ",
                    "options" : {
                        "id" : "",
                        "classes" : "container-fluid",
                        "extraClasses" : "",
                    }
            };
            var nowHtmlObj = handleGeneratorHtmlOfContainers(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("row" === cptType){
            var rowNums = (handleType ===  "1"  && firstOptions.number2>2)?2:firstOptions.number2;
            var colSizeGroups = firstOptions.size.split(",");
            var colNumGroups = firstOptions.number.split(",");
            var colSizeNums = (handleType ===  "1"  && colSizeGroups.length>3)?3:colSizeGroups.length;
            
            var kvMaps = {};
            for(var k=0; k<colSizeNums; k++){
                var t = colNumGroups[k].split(" ");
                var colNums = (handleType ===  "1" &&t.length>10)?10:t.length;
                for(var j=0;j<colNums;j++){
                    var colclass =  colSizeGroups[k] + "-" + t[j];
                    if(kvMaps[j]){
                        kvMaps[j] = kvMaps[j] +" "+ colclass;
                    }else{
                        kvMaps[j] = colclass;
                    }
                }
            }
            
            //实例化
            for(var i=0; i<rowNums; i++){
                //封装属性
                var colsOpt = [];
                var lastopts = {
                        "cptId": zUtil.uuid(),
                        "cptType": cptType,
                        "cptTitle": cptTitle,
                        "cptClass": "cpt-c cpt-row",
                        "options":{
                            "id": "",
                            "classes": "row",
                            "extraClasses": '',
                        },
                        "cptChildrenCols": colsOpt,
                };
                $.each(kvMaps,function(i,colclass){
                    var optCol = {
                            "cptId": zUtil.uuid(),
                            "cptType": "row-col",
                            "options":{
                                "id": "",
                                "classes": "",
                                "extraClasses": colclass
                            }
                    };
                    colsOpt.push(optCol);
                });
                
                var nowHtmlObj = handleGeneratorHtmlOfRows(handleType,lastopts,parentObj);
                if(handleType==="1"){
                    lastHtmlObj.children().append(nowHtmlObj);
                }
            }
        }
        else if("tabs" === cptType){
            var tabNums = (handleType ===  "1" &&firstOptions.number>3)? 3 : firstOptions.number;
            
            //封装属性
            var tid = createFieldNo();
            var headerItemOpts = [];
            var contentItemOpts = [];
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-tabs",
                    "options":{
                        "headerId": 'tab-'+tid,
                        "headerClasses": "nav tab-header",
                        "headerExtraClasses": "nav-tabs",
                        "contentId": 'tabContent-'+tid,
                        "contentClasses": "tab-content",
                        "contentExtraClasses": ""
                    },
                    "cptChildrenHeaders": headerItemOpts,
                    "cptChildrenContents": contentItemOpts,
            }
            
            for(var i=0;i<tabNums;i++){
                var itemOptsH = {
                        "cptId": zUtil.uuid(),
                        "cptType": "tab-headeri",
                        "options":{
                            "id": 'tab-'+tid+'-'+(i+1),
                            "title": '标签'+(i+1),
                            "classes": "nav-link",
                            "extraClasses": i==0?"active":""
                        }
                };
                var itemOptsC = {
                        "cptId": zUtil.uuid(),
                        "cptType": "tab-contenti",
                        "options":{
                            "id": 'tabContent-'+tid+'-'+(i+1),
                            "classes": "tab-pane fade",
                            "extraClasses":  i==0?"active show":""
                        }
                };
                headerItemOpts.push(itemOptsH);
                contentItemOpts.push(itemOptsC);
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfTabs(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("scroll" === cptType){
            var tabNums = (handleType ===  "1" &&firstOptions.number>3)? 3 : firstOptions.number;
            
            //封装属性
            var tid = createFieldNo();
            var headerItemOpts = [];
            var contentItemOpts = [];
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-scroll",
                    "options":{
                        "headerId": 'scroll-'+tid,
                        "headerClasses": "nav scroll-header",
                        "headerExtraClasses": "nav-pills",
                        "contentId": 'scrollContent-'+tid,
                        "contentClasses": "scroll-content",
                        "contentExtraClasses": ""
                    },
                    "cptChildrenHeaders": headerItemOpts,
                    "cptChildrenContents": contentItemOpts,
            }
            
            for(var i=0;i<tabNums;i++){
                var itemOptsH = {
                        "cptId": zUtil.uuid(),
                        "cptType": "scroll-headeri",
                        "options":{
                            "id": 'scroll-'+tid+'-'+(i+1),
                            "title": '标签'+(i+1),
                            "classes": "nav-link",
                            "extraClasses": i==0?"active":""
                        }
                };
                var itemOptsC = {
                        "cptId": zUtil.uuid(),
                        "cptType": "scroll-contenti",
                        "options":{
                            "id": 'scrollContent-'+tid+'-'+(i+1),
                            "classes": "",
                            "extraClasses": ""
                        }
                };
                headerItemOpts.push(itemOptsH);
                contentItemOpts.push(itemOptsC);
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfScrolls(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("div" === cptType){
            //封装属性
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-div",
                    "options":{
                        "id": "",
                        "classes": "box-div",
                        "extraClasses": "",
                    }
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfDivs(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("input" === cptType){
            var nums = (handleType ===  "1" &&firstOptions.number>1)?1:firstOptions.number;
            for(var i=0; i<nums; i++){
                var fieldId = createFieldNo();//随机ID
                var fieldName = fieldId;//随机ID
                //封装属性
                var lastopts = {
                        "cptId": zUtil.uuid(),
                        "cptType": cptType,
                        "cptTitle": cptTitle,
                        "cptClass": "cpt-c cpt-input",
                        "options":{
                            "fieldId": fieldId,
                            "fieldName": fieldName,
                            "fieldClasses": 'form-control',
                            "fieldExtraClasses": 'form-control-'+firstOptions.size,
                            "titleText": '标题',
                            "titleClasses": 'col-form-label',
                            "titleExtraClasses": 'col-form-label-'+firstOptions.size,
                        }
                }
                
                var nowHtmlObj = handleGeneratorHtmlOfInputs(handleType,lastopts,parentObj);
                if(handleType==="1"){
                    lastHtmlObj.children().append(nowHtmlObj);
                }
            }
        }
        else if("select" === cptType){
            var nums = (handleType ===  "1" &&firstOptions.number>1)?1:firstOptions.number;
            for(var i=0; i<nums; i++){
                var fieldId = createFieldNo();//随机ID
                var fieldName = fieldId;//随机ID
                //封装属性
                var lastopts = {
                        "cptId": zUtil.uuid(),
                        "cptType": cptType,
                        "cptTitle": cptTitle,
                        "cptClass": "cpt-c cpt-select",
                        "options":{
                            "fieldId": fieldId,
                            "fieldName": fieldName,
                            "fieldClasses": 'form-control',
                            "fieldExtraClasses": 'form-control-'+firstOptions.size,
                            "titleText": '标题',
                            "titleClasses": 'col-form-label',
                            "titleExtraClasses": 'col-form-label-'+firstOptions.size,
                        }
                }
                var nowHtmlObj = handleGeneratorHtmlOfSelects(handleType,lastopts,parentObj);
                if(handleType==="1"){
                    lastHtmlObj.children().append(nowHtmlObj);
                }
            }
        }
        else if("button" === cptType){
            //封装属性
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-button",
                    "options":{
                        "id": createFieldNo(),
                        "classes": "btn",
                        "extraClasses": 'btn-primary btn-'+firstOptions.size,
                        "text": "按钮",
                    }
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfButtons(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("model" === cptType){
            //封装属性
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-model",
                    "options":{
                        "id": "",
                        "classes": "box-div",
                        "extraClasses": "",
                    }
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfModels(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("table" === cptType){
            //封装属性 
            var id = createFieldNo();
            var tbid = 'tb-'+id;
            var tableOpts = {
                    toolbar:'#'+tbid,
                    height: 400,
                    columns: [
                        {field:"oprtionsCol", title:"操作", align:"center", width: 150,formatter:function(){
                            var btnArr = [];
                            btnArr.push('<a class="btn btn-info btn-sm" style="font-size: 10px;padding: .1rem .2rem;" onclick="editRowFor'+id+'();">编辑</a>');
                            btnArr.push('<a class="btn btn-info btn-sm" style="font-size: 10px;padding: .1rem .2rem;" onclick="viewRowFor'+id+'();">详情</a>');
                            btnArr.push('<a class="btn btn-info btn-sm" style="font-size: 10px;padding: .1rem .2rem;" onclick="delRowFor'+id+'();">删除</a>');
                            return btnArr.join(" ");
                        }},
                        {field:"col1", title:"列1", align:"center", width: 60},
                        {field:"col2", title:"列2", align:"center", width: 60},
                        {field:"col3", title:"列3", align:"center", width: 60},
                        {field:"col4", title:"列4", align:"center", width: 60},
                        {field:"col5", title:"列5", align:"center", width: 60},
                        {field:"col6", title:"列6", align:"center", width: 60},
                        {field:"_blank", title:" ", align:"center",formatter:function(){
                            return "";
                        }},
                   ],
                   data: {
                       total: 100,
                       rows:[
                        {col1:"1",col2:"2",col3:"3",col4:"4",col5:"5",col6:"6"}
                       ,{col1:"1",col2:"2",col3:"3",col4:"4",col5:"5",col6:"6"}
                       ]
                   }
            };
            
            var lastopts = {
                    "cptId": zUtil.uuid(),
                    "cptType": cptType,
                    "cptTitle": cptTitle,
                    "cptClass": "cpt-c cpt-table",
                    "options":{
                         "id": id,
                         "classes": "box-table",
                         "extraClasses": "",
                         "tbid": tbid,
                         "tableOpts": tableOpts,
                    }
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfTables(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        else if("stackedBar" === cptType){
            
            var chartopts = {angleAxis:{type:'category',data:['分组1','分组2','分组3','分组4']},radiusAxis:{axisLine:{lineStyle:{color:'#FFF',width:2}},},polar:{},series:[{type:'bar',data:[2,4,6,8],coordinateSystem:'polar',name:'A',stack:'a',title:{textStyle:{color:"#FFF"}}},{type:'bar',data:[8,4,8,2],coordinateSystem:'polar',name:'B',stack:'a',title:{textStyle:{color:"#FFF"}}}],legend:{show:true,data:[{name:'A',icon:'circle',textStyle:{color:'#FFF'}},{name:'B',icon:'circle',textStyle:{color:'#FFF'}}]},};
            
            //封装属性
            var lastopts = {
                 "cptId": zUtil.uuid(),
                 "cptType": cptType,
                 "cptTitle": cptTitle,
                 "cptClass": "cpt-c cpt-stackedBar",
                 "options":{
                     "id": createFieldNo(),
                     "classes": "chartes",
                     "extraClasses": "",
                     "chartOpts": chartopts,
                     "styles": "width: 300px;height:180px;margin: auto;",
                 }
            }
            
            var nowHtmlObj = handleGeneratorHtmlOfStackedBars(handleType,lastopts,parentObj);
            if(handleType==="1"){
                lastHtmlObj.children().append(nowHtmlObj);
            }
        }
        
    }
    
    return lastHtmlObj;
}

//组件-排序实现
function handleGeneratorHtmlForSortable(cptType,lastHtmlObj){
    $.each(lastHtmlObj,function(i,item){
        $(item).draggable({
            connectToSortable: '.cpt-views',
            containment: "window",
            addClasses: false,
            cursor: "move",
            cursorAt: { left: 7,bottom:15  },//初始光标位置
            distance: 5,//生效距离
            iframeFix: true,
            scroll: true,
            opacity: 1,
            scrollSensitivity: 30,
            revert: "invalid",
            zIndex: 9999,
            start: function(e, ui) {
                if(!$('#edit-content').hasClass("edit")){
                    return false;
                };
                $(e.target).addClass("cpt-c-none");
            },
            stop: function(e, ui) {
                ui.helper.removeAttr("style");
                ui.helper.addClass("cpt-c-none");
                $(e.target).insertAfter(ui.helper);
                $(e.target).removeClass("cpt-c-none");
                ui.helper.remove();
            },
            helper: function(e) {
                var t = $('<div class="overflow-hidden drag-cpt-c"><div style="fint-size: .725rem;position: fixed;">移动</div></div>');
                return t;
            },
        });
    });
    
    if($.inArray(cptType, layoutEls)!=-1){
        lastHtmlObj.find(".column").sortable({
              connectWith: ".column",
              containment: ".edit-content",
              opacity: 1,
              distance: 5,//生效距离
              cursor: "move",
              items: ".cpt-c",
              forcePlaceholderSize:true,
              forceHelperSize:true,
              tolerance:"pointer",
              helper:"clone",
              stop: function(e, ui) {
                  ui.helper.removeAttr("style");
              },
              start: function( event, ui ) {
                  if(!$('#edit-content').hasClass("edit")){
                    return false;
                  };
              }
         });
        lastHtmlObj.find(".row").sortable({
            opacity: 1,
            distance: 3,//生效距离
            cursor: "move",
            cursorAt: { left: 0, top:0 },//初始光标位置
            start: function(e, ui) {
                if(!$('#edit-content').hasClass("edit")){
                    return false;
                };
                $(ui.item).addClass("cpt-c-none");
                if(ui.helper){
                    $(ui.helper).css({"width":"auto","height":"auto"});
                }
            },
            stop: function(e, ui) {
                $(ui.item).removeClass("cpt-c-none");
                $(ui.item).removeAttr("style");
            },
            helper: function(e) {
                var t = $('<div class="overflow-hidden drag-cpt-c"><div style="fint-size: .725rem;position: fixed;">排序</div></div>');
                return t;
            },
       });
     }
}
//组件-基础结构
function handleGeneratorHtmlForCpt(cptId,cptType,cptClass){
    return $('<div class="'+cptClass+'" cpt-id="'+cptId+'" cpt-type="'+cptType+'">'
            +'<div class="cpt-views"></div>'
            +'<div class="cpt-options"></div>'
            +'</div>');
}
function handleGeneratorHtmlForDragCpt(cptClass){
    return $('<div class="drag-cpt '+cptClass+'""><div class="cpt-views"></div></div>');
}
//组件-处理子组件
function handleGeneratorHtmlOfChildCpts(handleType,lastopts,parentOpts,parentObj){
    if(parentOpts['cptChildren']){
        delete lastopts['cptChildren'];//清理
        
        var handleChildrenFunc = function(handleType,lastopts,parentObj){
            if("container" === lastopts.cptType){
                handleGeneratorHtmlOfContainers(handleType,lastopts,parentObj);
            }
            else if("row" === lastopts.cptType){
                handleGeneratorHtmlOfRows(handleType,lastopts,parentObj);
            }
            else if("tabs" === lastopts.cptType){
                handleGeneratorHtmlOfTabs(handleType,lastopts,parentObj);
            }
            else if("scroll" === lastopts.cptType){
                handleGeneratorHtmlOfScrolls(handleType,lastopts,parentObj);
            }
            else if("div" === lastopts.cptType){
                handleGeneratorHtmlOfDivs(handleType,lastopts,parentObj);
            }
            else if("input" === lastopts.cptType){
                handleGeneratorHtmlOfInputs(handleType,lastopts,parentObj);
            }
            else if("select" === lastopts.cptType){
                handleGeneratorHtmlOfSelects(handleType,lastopts,parentObj);
            }
            else if("button" === lastopts.cptType){
                handleGeneratorHtmlOfButtons(handleType,lastopts,parentObj);
            }
            else if("model" === lastopts.cptType){
                handleGeneratorHtmlOfModels(handleType,lastopts,parentObj);
            }
            else if("table" === lastopts.cptType){
                handleGeneratorHtmlOfTables(handleType,lastopts,parentObj);
            }
            else if("stackedBar" === lastopts.cptType){
                handleGeneratorHtmlOfStackedBars(handleType,lastopts,parentObj);
            }else{
                 
            }
        };
        
        if($.inArray(parentOpts.cptType, layoutEls)!=-1){//布局组件
            var childOpts = parentOpts['cptChildren'];
            if(childOpts && childOpts.length>0){
                $.each(childOpts,function(i,optx){
                    handleChildrenFunc(handleType,optx,parentObj);
                });
            }
        }
    }
}
//组件-主容器(单独处理)
function handleGeneratorHtmlOfContainers(handleType,lastopts,parentObj) {
     //实例化
     var cptObj = handleGeneratorHtmlForDragCpt('drag-container');
     if(handleType === "1"){
         cptObj.find('.cpt-views').append('<div>'+lastopts.cptTitle+'</div>');
     }else if(handleType === "2"){
         var myOpts = $.extend(true,{},lastopts);
         var myOpts2 = myOpts.options;
         
         cptObj = $('<div class="'+myOpts.cptClass+'" cpt-id="'+myOpts.cptId+'" cpt-type="'+myOpts.cptType+'">'
                  +'<div class="cpt-views column"></div>'
                  +'<div class="cpt-options"></div>'
                  +'</div>');
         parentObj.append(cptObj);
         parentObj.addClass(myOpts2.classes +' '+myOpts2.classes);
         cptObj.children('.cpt-views').attr('id',myOpts2.id);
         
         $('#container-class').val(myOpts2.classes);
         
         handleGeneratorHtmlOfChildCpts(handleType,myOpts,lastopts,cptObj.find('.cpt-views'));
         
         cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
         
         //排序初始化
         $(".edit-content .cpt-container>.cpt-views").sortable({
             connectWith: ".column",
             opacity: .5,
             handle: ".drag",
             distance: 5,//生效距离
             tolerance:"pointer",
             forcePlaceholderSize:true,
             forceHelperSize:true,
             start: function( event, ui ) {
                 if(!$('#edit-content').hasClass("edit")){
                   return false;
                 };
             }
         });
     }
     
     return cptObj;
}
//组件-栅格
function handleGeneratorHtmlOfRows(handleType,lastopts,parentObj) {
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-row');
    
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var rowObj = $('<div class="'+myOpts2.classes+'"></div>');
    cptObj.children('.cpt-views').append(rowObj);
    
    $.each(myOpts.cptChildrenCols,function(i,colopts){
        var myOptsCol = $.extend(true, {}, colopts);
        var myOptsCol2 = myOptsCol.options;
        
        var colObj = $('<div class="' + myOptsCol2.classes +' '+ myOptsCol2.extraClasses+ ' column" cpt-id="'+myOptsCol.cptId+'" cpt-type="'+myOptsCol.cptType+'" cpt-pid="'+myOpts.cptId+'" ></div>');
        
        handleGeneratorHtmlOfChildCpts(handleType,colopts,myOptsCol,colObj);
        
        rowObj.append(colObj);
    });
    
    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-标签切换容器
function handleGeneratorHtmlOfTabs(handleType,lastopts,parentObj) {
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-tabs');
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId,myOpts.cptType,myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var tabHeaderObj = $('<nav><ul class="'+myOpts2.headerClasses+' '+myOpts2.headerExtraClasses+'" id="'+myOpts2.headerId+'" role="tablist"></ul></nav>');
    var tabContentObj = $('<div class="'+myOpts2.contentClasses+' '+myOpts2.contentExtraClasses+'" id="'+myOpts2.contentId+'" ></div>');
    cptObj.children('.cpt-views').append(tabHeaderObj).append(tabContentObj);
    
    for(var i=0,j=myOpts.cptChildrenHeaders.length;i<j;i++){
        var headerOpt = $.extend(true, {}, myOpts.cptChildrenHeaders[i]);
        var headerOpt2 = headerOpt.options;
        var contentOpt = $.extend(true, {}, myOpts.cptChildrenContents[i]);
        var contentOpt2 = contentOpt.options;
        var headerObj = $('<li class="nav-item"><a class="'+headerOpt2.classes+' '+headerOpt2.extraClasses+'" href="#'+contentOpt2.id+'" data-toggle="tab" id="'+headerOpt2.id+'" cpt-id="'+headerOpt.cptId+'" cpt-type="'+headerOpt.cptType+'" cpt-pid="'+myOpts.cptId+'">'+headerOpt2.title+'</a></li>');
        var contentObj = $('<div class="'+contentOpt2.classes+' '+contentOpt2.extraClasses+' column" id="'+contentOpt2.id+'" cpt-id="'+contentOpt.cptId+'" cpt-type="'+contentOpt.cptType+'" cpt-pid="'+myOpts.cptId+'"></div>');
        
        tabHeaderObj.children('ul').append(headerObj);
        tabContentObj.append(contentObj);
        
        handleGeneratorHtmlOfChildCpts(handleType,myOpts.cptChildrenContents[i],contentOpt,contentObj);
    }
    
    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        cptObj.find("#"+myOpts2.headerId).parent().mCustomScrollbar({
            axis:"x",
            theme:"dark",
            autoHideScrollbar: true, //自动隐藏
            advanced:{
                autoExpandHorizontalScroll:true 
            }
        });
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-滚动监听容器
function handleGeneratorHtmlOfScrolls(handleType,lastopts,parentObj) {
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-scroll');
    
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var tabHeaderObj = $('<nav><ul class="'+myOpts2.headerClasses+' '+myOpts2.headerExtraClasses+'" id="'+myOpts2.headerId+'" role="tablist"></ul></nav>');
    var tabContentObj = $('<div data-spy="scroll" class="'+myOpts2.contentClasses+' '+myOpts2.contentExtraClasses+'" id="'+myOpts2.contentId+'"></div>');
    cptObj.children('.cpt-views').append(tabHeaderObj).append(tabContentObj);
    
    for(var i=0,j=myOpts.cptChildrenHeaders.length;i<j;i++){
        var headerOpt = $.extend(true, {}, myOpts.cptChildrenHeaders[i]);
        var headerOpt2 = headerOpt.options;
        var contentOpt = $.extend(true, {}, myOpts.cptChildrenContents[i]);
        var contentOpt2 = contentOpt.options;
        var headerObj = $('<li class="nav-item"><a  class="'+headerOpt2.classes+' '+headerOpt2.extraClasses+'" href="#'+contentOpt2.id+'" id="'+headerOpt2.id+'" cpt-id="'+headerOpt.cptId+'" cpt-type="'+headerOpt.cptType+'" cpt-pid="'+myOpts.cptId+'">'+headerOpt2.title+'</a></li>');
        var contentObj = $('<div class="'+contentOpt2.classes+' '+contentOpt2.extraClasses+' column" id="'+contentOpt2.id+'" cpt-id="'+contentOpt.cptId+'" cpt-type="'+contentOpt.cptType+'" cpt-pid="'+myOpts.cptId+'"></div>');
        
        tabHeaderObj.children('ul').append(headerObj);
        tabContentObj.append(contentObj);
        
        handleGeneratorHtmlOfChildCpts(handleType,myOpts.cptChildrenContents[i],contentOpt,contentObj);
    }
    
    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        cptObj.find("#"+myOpts2.headerId).mCustomScrollbar({
            axis:"x",
            theme:"dark",
            autoHideScrollbar: true, //自动隐藏
            advanced:{
                autoExpandHorizontalScroll:true 
            }
        });
        
        cptObj.find('#'+myOpts2.contentId).scrollspy({
            target: '#'+myOpts2.headerId ,
            offset: 40
        });
        $('#edit-content [data-spy="scroll"]').each(function () {
            $(this).scrollspy('refresh');
        });
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-div容器
function handleGeneratorHtmlOfDivs(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-div');
    
    if(handleType === "1"){
        cptObj.find('.cpt-views').append('<div>'+lastopts.cptTitle+'</div>');
        
        return cptObj;
    }else if(handleType === "2"){
        var myOpts = $.extend(true, {}, lastopts);
        var myOpts2 = myOpts.options;
        
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
        
        var divObj = $('<div class="'+myOpts2.classes+' '+ myOpts2.extraClasses+' column" id="'+myOpts2.id+'"></div>');
        cptObj.children('.cpt-views').append(divObj);

        handleGeneratorHtmlOfChildCpts(handleType,myOpts,lastopts,divObj);
        
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}

//组件-弹出框
function handleGeneratorHtmlOfModels(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-model');
    
    if(handleType === "1"){
        cptObj.find('.cpt-views').append('<div>'+lastopts.cptTitle+'</div>');
        
        return cptObj;
    }else if(handleType === "2"){
        var myOpts = $.extend(true, {}, lastopts);
        var myOpts2 = myOpts.options;
        
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
        
        var divObj = $('<div class="'+myOpts2.classes+' '+ myOpts2.extraClasses+' column" id="'+myOpts2.id+'"></div>');
        cptObj.children('.cpt-views').append(divObj);

        handleGeneratorHtmlOfChildCpts(handleType,myOpts,lastopts,divObj);
        
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    return cptObj;
}
//组件-输入框
function handleGeneratorHtmlOfInputs(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-input');
   
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var inputObj = $('<div class="form-group"><label class="'+myOpts2.titleClasses+' '+myOpts2.titleExtraClasses+'">'+myOpts2.titleText+'</label>'
            +'<input type="text" class="'+myOpts2.fieldClasses+' '+myOpts2.fieldExtraClasses+'" id="'+myOpts2.fieldId+'" name="'+myOpts2.fieldName+'" ></div>');
    cptObj.children('.cpt-views').append(inputObj);

    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-下拉框
function handleGeneratorHtmlOfSelects(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-select');
    
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var inputObj = $('<div class="form-group"><label class="'+myOpts2.titleClasses+' '+myOpts2.titleExtraClasses+'">'+myOpts2.titleText+'</label>'
            +'<select type="text" class="'+myOpts2.fieldClasses +' '+myOpts2.fieldExtraClasses+'" id="'+myOpts2.fieldId+'" name="'+myOpts2.fieldName+'" >'
            +'<option value="">请选择</option>'
            +'</select></div>');
    cptObj.children('.cpt-views').append(inputObj);

    cptObj.find('select').selectpicker({
        style:"btn-none"
    });
    
    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-按钮
function handleGeneratorHtmlOfButtons(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-button');
    
    var myOpts = $.extend(true, {}, lastopts);
    var myOpts2 = myOpts.options;
    
    if(handleType === "2"){
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
    }
    
    var buttonObj = $('<button type="button" class="'+myOpts2.classes+" "+myOpts2.extraClasses+'" id="'+myOpts2.id+'" >'+myOpts2.text+'</button>');
    cptObj.children('.cpt-views').append(buttonObj);
    
    if(handleType === "2"){
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    
    return cptObj;
}
//组件-表格
function handleGeneratorHtmlOfTables(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-table');
    
    if(handleType === "1"){
        cptObj.find('.cpt-views').append('<div>'+lastopts.cptTitle+'</div>');
    }else if(handleType === "2"){
        var myOpts = $.extend(true, {}, lastopts);
        var myOpts2 = myOpts.options;
        
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
        
        var tableObj = $('<div class="'+myOpts2.classes+' '+ myOpts2.extraClasses+'" style=""><div class="p-1" id="'+myOpts2.tbid+'" style="">'
            +'<button class="btn btn-info btn-sm" type="button" onclick="addRowFor'+myOpts2.id+'();">新增</button>'
            +'</div>'
            +'<table id="'+myOpts2.id+'" ></table>'
            +'</div>');
        cptObj.children('.cpt-views').append(tableObj);
        
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        setTimeout(function(){
            zUtil['BstTable'].tableInit('#' + myOpts2.id, myOpts2.tableOpts);
            $(window).resize();
        },50);
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType,cptObj);
    }
    return cptObj;
}
//组件-扇形堆叠图
function handleGeneratorHtmlOfStackedBars(handleType,lastopts,parentObj) {
    //实例化
    var cptObj = handleGeneratorHtmlForDragCpt('drag-stackedBar');
    
    if(handleType === "1"){
        cptObj.find('.cpt-views').append('<div>'+lastopts.cptTitle+'</div>');
        
        return cptObj;
    }else if(handleType === "2"){
        var myOpts = $.extend(true, {}, lastopts);
        var myOpts2 = myOpts.options;
        
        cptObj = handleGeneratorHtmlForCpt(myOpts.cptId, myOpts.cptType, myOpts.cptClass);
        parentObj.append(cptObj);
        
        var chartsObj = '<div class="'+myOpts2.classes+'" id ="'+myOpts2.id+'" style="'+myOpts2.styles+'"></div>';
        cptObj.children('.cpt-views').append(chartsObj);
        
        cptObj.children('.cpt-options').html(JSON.stringify(myOpts));
        
        var myChart = echarts.init(cptObj.find('#'+myOpts2.id)[0]);
        myChart.setOption(myOpts2.chartOpts);
        
        //排序初始化
        handleGeneratorHtmlForSortable(myOpts.cptType, cptObj);
    }
    
    return cptObj;
}

//组件-栅格
function createHtmlOfRows(handleType,options,lastopts,parentObj) {
    
}
//组件-栅格单元格
function createHtmlOfRowCols(handleType,options,lastopts,parentObj) {
    
}
//组件-标签切换容器
function createHtmlOfTabs(handleType,options,lastopts,parentObj) {
    
}
//组件-滚动监听容器
function createHtmlOfScrolls(handleType,options,lastopts,parentObj) {
    
}
//组件-div容器
function createHtmlOfDivs(handleType,options,lastopts,parentObj) {
    
}
//组件-弹出框
function createHtmlOfModels(handleType,options,lastopts,parentObj) {
    
}
//组件-输入框
function createHtmlOfInputs(handleType,options,lastopts,parentObj) {

}
//组件-下拉框
function createHtmlOfSelects(handleType,options,lastopts,parentObj) {

}
//组件-按钮
function createHtmlOfButtons(handleType,options,lastopts,parentObj) {

}
//组件-表格
function createHtmlOfTables(handleType,options,lastopts,parentObj) {

}
//组件-扇形堆叠图
function createHtmlOfStackedBars(handleType,options,lastopts,parentObj) {

}
